<template>
  <div>
    <!-- 表单 -->
    <div class="select-box">
      <el-form :inline="true" :model="selectData" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input v-model="selectData.projectName" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="启动日期">
          <el-input v-model="selectData.launchDate" placeholder="请输入启动日期" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button class="login-btn" @click="resetForm">重置</el-button>
          <el-button class="login-btn" @click="openAdd">新建项目</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="dataList.comList" border style="width: 100%">
        <el-table-column prop="id" label="No" width="110" />
        <el-table-column prop="projectName" label="项目名称" width="140" />
        <el-table-column prop="leaderName" label="负责人" width="140" />
        <el-table-column prop="launchDate" label="项目启动日期" width="140" />
        <el-table-column prop="memberNumber" label="当前人数" width="140" />
        <el-table-column prop="duration" label="项目周期" width="140" />
        <el-table-column prop="rate" label="项目状态" width="140">
          <template #default="scope">
            <el-progress type="line" :stroke-width="10" :percentage="scope.row.rate" :color="customColorMethod">
            </el-progress>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" @click="checkManage(scope.row)">
              查看
            </el-button>
            <el-button type="primary" size="small" @click="openUpdate(scope.row)">
              配置
            </el-button>
            <el-button type="primary" size="small" @click="deleteInfo(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination v-model:currentPage="selectData.pages" :page-size="selectData.pagesizes"
      :page-sizes="[10, 20, 30, 40]" small layout="total, sizes, prev, pager, next, jumper" :total="selectData.count"
      @size-change="sizeChange" @current-change="currentChange" />
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, reactive, toRefs, watch, ref } from 'vue';
import { getProjectList, delProjectList } from "@/request/projectapi";
import { InitData, ListInt } from "@/type/project";
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, rowContextKey } from 'element-plus'
export default defineComponent({
  setup() {
    const data = reactive(new InitData())
    onMounted(() => {
      getdataProject()
    });
    const getdataProject = () => {
      const params: Object = {
        page: 1,
        pageSize: 100,
        //id:data.selectData.id,
        //leaderName:data.selectData.leaderName,
        projectName: data.selectData.projectName,
        launchDate: data.selectData.launchDate,
        //memberNumber:data.selectData.memberNumber,
        //duration:data.selectData.duration,
        //rate:data.selectData.rate        
      }
      //获取数据
      getProjectList(params).then(res => {
        console.log(res);
        data.list = res.data.records
        data.selectData.count = res.data.records.length
      });
    }
    //颜色判断
    const customColorMethod = (row: any) => {
      if (row.rate < 10) {
        return 'red'
      }
      if (row.rate < 60) {
        return 'yello'
      }
        return 'green'
      }
    //分页
    const dataList = reactive({
      comList: computed(() => {
        return data.list.slice((data.selectData.pages - 1) * data.selectData.pagesizes, data.selectData.pages * data.selectData.pagesizes);
      }),
    });
    const currentChange = (page: number) => {
      data.selectData.pages = page
    }
    const sizeChange = (pagesize: number) => {
      data.selectData.pagesizes = pagesize
    }
    //查询
    const onSubmit = () => {
      getdataProject()
    };
    ////重置
    const resetForm = () => {
      data.selectData.projectName = "";
      data.selectData.launchDate = "";
    };
    //监听输入框的属性
    watch(
      [() => data.selectData.projectName, () => data.selectData.launchDate], () => {
        if (data.selectData.projectName == '' && data.selectData.launchDate == '') {
          getdataProject()
        }
      });
    const router = useRouter()
    //查看
    const checkManage = (row: ListInt) => {
      router.push({
        name: "check",
        params: { 
          projectName: row.projectName ,
          leaderName:row.leaderName,
          launchDate:row.launchDate,
        },
      })
    }
    //新建
    const openAdd = () => {
      router.push('./projectadd')
    }
    //配置
    const openUpdate = (row: ListInt) => {
      router.push({
        name: "projectadd",
        params: {
          projectName: row.projectName ,
          leaderId:row.leaderId,
          launchDate:row.launchDate,
          duration:row.duration
        },
      })
    }
    //删除
    const deleteInfo = (row: ListInt) => {
      ElMessageBox.confirm(
        '确定要删除该项目?',
        '删除项目',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(async () => {
          
        const params: Object = {
        id:row.id,     
        }
      delProjectList(params).then((res: any) => {
          console.log(res);
          ElMessage.success("删除成功");
          getdataProject(); 
        });
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除',
          })
        })
    }
    return {
      ...toRefs(data),customColorMethod, dataList, getdataProject, currentChange, sizeChange, onSubmit, resetForm, openAdd, openUpdate, checkManage, deleteInfo,
    }
  },
  components: {},
})
</script>
<style lang="scss" scoped>
</style>
